<script setup>
import { ref, onMounted, onUpdated, onBeforeMount, onBeforeUpdate, watch, watchEffect } from 'vue'
import { RouterLink, useRoute } from 'vue-router'
import { useAnchorsStore } from '../stores/anchorsStore';
import { useCommonStore } from '../stores/commonStore';

defineProps({
  userName: {
    type: String,
    default: () => '代码与汉堡'
  },
  motto: {
    type: String,
    default: () => '努力成为架构师'
  }
})
// 路由获取参数
const route = useRoute()
// user开篇是否展示文章锚点
const showCategory = ref(true)
// 锚点信息 应该有detail传过来
const titles = ref([])
// 锚点titles和方法存储
const anchorsStore = useAnchorsStore()
// 骨架屏
const loading = ref(true)
// 存储归档文章总数, 分类总数和标签总数
const commonStore = useCommonStore()

// 点击标题目录定位到标题
const handleAnchorClick = (anchor) => {
  anchorsStore.handleAnchorClick(anchor)
}
// 更新骨架屏加载和锚点
const refresh = () => {
  setTimeout(() => {
    titles.value = anchorsStore.titles
    // // 获取文章目录
    loading.value = false
  }, 1000);

}

onMounted(() => {
  refresh()
})

onUpdated(() => {
  refresh()
})

</script>

<template>
  <div
    class="font-semibold text-gray-600 py-2 space-x-2 bg-white flex items-center justify-center  cursor-pointer"
    v-if="route.name === 'detailView'"
  >
    <div
      :class="[showCategory ? 'text-yellow-600 border-yellow-600' : '']"
      class="hover:text-yellow-600 hover:border-yellow-600 py-1 border-b-2 border-transparent ease-in-out duration-400"
      @click="showCategory = true"
    >文章目录</div>
    <div
      style="width:1px;"
      class="border border-yellow-400 h-5"
    ></div>
    <div
      :class="[!showCategory ? 'text-yellow-600 border-yellow-600' : '']"
      class="hover:text-yellow-600 hover:border-yellow-600 py-1 border-b-2 border-transparent ease-in-out duration-400"
      @click="showCategory = false"
    >站点概述</div>
  </div>
  <div
    v-if="showCategory && route.name === 'detailView'"
    class="bg-white flex flex-col items-center py-2"
  >
    <el-skeleton
      :loading="loading"
      animated
    >
      <template #template>
        <div
          v-for="i in 4"
          class="w-1/2 py-1 flex mx-auto"
        >
          <el-skeleton-item variant="h1" />
        </div>
      </template>
      <template #default>
        <div
          class="w-full flex items-center pl-16 text-lg"
          v-for="(anchor) in titles"
          @click="handleAnchorClick(anchor)"
        >
          <div
            class="cursor-pointer flex "
            :class="[anchor.indent == 0 ? 'pl-0' : '',
    anchor.indent == 1 ? 'pl-2' : '',
    anchor.indent == 2 ? 'pl-4' : '',
    anchor.indent == 3 ? 'pl-8 ' : ''
    ]"
          >
            <div class="pb-2 text-yellow-900">
              {{ anchor.title }}
            </div>
          </div>
        </div>
      </template>
    </el-skeleton>

  </div>
  <div
    v-show="!showCategory || route.name !== 'detailView'"
    class="bg-white flex flex-col items-center py-5 "
  >
    <img
      class="mb-4 transition ease-in-out  hover:-translate-y-1 hover:scale-110 duration-200 w-36 h-36 rounded-full"
      src="../assets/user.png"
    >
    <div class="font-bold text-2xl py-2">{{ userName }}</div>
    <div class="text-gray-600 font-medium py-2 flex items-center">
      {{ motto }}
      <svg
        t="1710591531216"
        class="w-5 h-5 pl-1"
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="8118"
      >
        <path
          d="M281.9 536.2L294 816.7l72.4-164z"
          fill="#5CCFEA"
          p-id="8119"
        ></path>
        <path
          d="M294 834.1c-1.1 0-2.1-0.1-3.2-0.3-7.9-1.5-13.8-8.3-14.2-16.4l-12.1-280.5c-0.3-7.7 4.4-14.7 11.7-17.2 7.2-2.5 15.3 0 19.8 6.2l84.4 116.5c3.6 5 4.3 11.6 1.8 17.2l-72.4 164c-2.7 6.5-9 10.5-15.8 10.5z m7.8-240.8l6.4 148.1 38.2-86.6-44.6-61.5z"
          fill="#4C4848"
          p-id="8120"
        ></path>
        <path
          d="M910.3 180.3L505.2 844.2 113.9 304.4z"
          fill="#80D4EE"
          p-id="8121"
        ></path>
        <path
          d="M505.2 861.6c-5.6 0-10.8-2.7-14.1-7.2L99.8 314.6c-3.6-4.9-4.3-11.3-2-16.9 2.3-5.6 7.4-9.6 13.4-10.5l796.3-124.1c6.8-1 13.4 1.9 17.2 7.5 3.8 5.6 3.9 12.9 0.4 18.7L520 853.3c-3 5-8.3 8.1-14.2 8.3h-0.6zM144.7 317.2l359.2 495.6 371.9-609.5-731.1 113.9z"
          fill="#4C4848"
          p-id="8122"
        ></path>
        <path
          d="M910.3 180.3L366.4 652.7l-84.5-116.5z"
          fill="#5CCFEA"
          p-id="8123"
        ></path>
        <path
          d="M366.4 670.1c-0.7 0-1.3 0-2-0.1-4.8-0.6-9.2-3.1-12.1-7.1l-84.4-116.5c-2.9-4-4-9.1-2.9-13.9 1.1-4.8 4.1-9 8.4-11.5l628.3-355.9c7.8-4.4 17.6-2.2 22.8 5.1 5.2 7.3 4 17.3-2.8 23.2L377.8 665.8c-3.2 2.8-7.3 4.3-11.4 4.3z m-59-128.4l61.9 85.3 398.4-346-460.3 260.7z"
          fill="#4C4848"
          p-id="8124"
        ></path>
        <path
          d="M408.6 711L297.1 811.4l69.3-158.7z"
          fill="#5CCFEA"
          p-id="8125"
        ></path>
        <path
          d="M297.1 828.8c-3.6 0-7.1-1.1-10.2-3.3-6.6-4.8-9-13.6-5.8-21.1l69.2-158.7c2.5-5.7 7.9-9.7 14.1-10.3 6.3-0.7 12.3 2 16 7.1l42.2 58.3c5.2 7.2 4.2 17.2-2.4 23.1L308.8 824.3c-3.3 3-7.5 4.5-11.7 4.5z m73-141.2l-24.9 57 40-36.1-15.1-20.9z"
          fill="#4C4848"
          p-id="8126"
        ></path>
      </svg>
    </div>
    <div class="flex py-2">
      <RouterLink :to="{name:'archives'}">
        <div class="flex flex-col items-center  px-4 group cursor-pointer">
          <div class="font-bold text-gray-700 group-hover:text-black group-hover:scale-125 ease-in-out duration-500">
            {{ commonStore.article }}
          </div>
          <div>
            日志
          </div>
        </div>
      </RouterLink>

      <RouterLink  to="/state/category">
      <div class="flex flex-col items-center px-4 border-x border-gray-300 group">
        <div class="font-bold text-gray-700 ggroup-hover:text-black group-hover:scale-125 ease-in-out duration-500 ">
          {{ commonStore.category }}
        </div>
        <div>
          分类
        </div>
      </div>
    </RouterLink>

      <RouterLink to="/state/tags">
      <div class="flex flex-col items-center px-4 group">
        <div class="font-bold text-gray-700 group-hover:text-black group-hover:scale-125 ease-in-out duration-500">
          {{ commonStore.tag }}
        </div>
        <div>
          标签
        </div>
      </div>
    </RouterLink>


    </div>
  </div>
</template>

<style
  scoped
  lang='scss'
></style>../../stores/anchorsStore